<template>
  <div class="card-wrap common-problem">
    <Title title="待办审批" />
    <div class="show-all" @click="toList">
      <span>查看更多</span>
      <icon-right />
    </div>
    <a-scrollbar style="height: 140px; overflow: auto; margin-top: 10px">
      <ul v-if="listData.length">
        <li v-for="(item, i) in listData" :key="i" class="link-item flex-c-sb">
          <div>
            <p>
              <span>【{{ item.approvalName }}】</span>
              <span>单据号：</span>
              <span class="highlight">{{ item.billNo }}</span>
              <span style="margin-left: 10px">发起人：{{ item.promoterName }}</span>
            </p>
            <p class="time">发起时间：{{ $setTime(item.approvalTime) }}</p>
          </div>
          <a-button shape="round" type="primary" size="mini" @click="openAuthDetailDialog(item)">处理</a-button>
        </li>
      </ul>
      <a-empty v-else />
    </a-scrollbar>
  </div>
  <AuthDetailDialog v-if="showAuthDetailDialog" :isShow="showAuthDetailDialog" :detail="currentData" @closed="showAuthDetailDialog = false" @success="getList" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  import { useRouter } from 'vue-router'
  import AuthDetailDialog from '@/views/workFlow/myWork/components/authDetailDialog.vue'
  import { findApprovalProcessPage } from '@/api/workFlow'
  const listData = ref<Array<any>>([])
  const showAuthDetailDialog = ref(false)
  const currentData = ref<any>({})
  const router = useRouter()
  // 审批流列表
  async function getList() {
    const res: any = await findApprovalProcessPage({
      pageNum: 1,
      pageSize: 10,
      type: 2,
    })
    listData.value = res?.data?.records || []
  }
  getList()
  // 查看更多
  function toList() {
    router.push('/workFlow/myWork/myAwaitWork')
  }
  // 处理
  function openAuthDetailDialog(item: any) {
    currentData.value = item
    showAuthDetailDialog.value = true
  }
</script>

<style lang="less" scoped>
  .common-problem {
    margin-bottom: 10px;
  }
  ul {
    li {
      padding: 5px 10px;
      font-size: 12px;
      &:hover {
        background-color: rgb(var(--primary-1));
      }
      .time {
        color: #999;
      }
    }
  }
</style>
